<template>
	<view class="register-container">
		<view class="logo-box">
			<image src="../../static/2301.jpg" mode=""></image>
		</view>
		<view class="input-box">
			<text>用户名</text><input type="text" @blur="checkName" v-model.trim="wxUser.nickName">
		</view>
		<view class="error-message" v-if="nameError">
			用户名不能为空
		</view>
		<view class="input-box">
			<text>账号</text><input type="text" @blur="checkAccount" v-model.trim="wxUser.account">
		</view>
		<view class="error-message" v-if="accountError">
			账号不能为空
		</view>
		<view class="input-box">
			<text>密码</text><input type="password" @blur="checkPassword" v-model.trim="wxUser.password">
		</view>
		<view class="error-message" v-if="passwordError">
			密码不能为空
		</view>
		<view class="input-box">
			<text>确认密码</text><input type="password" @blur="checkRepassword" v-model.trim="wxUser.repassword">
		</view>
		<view class="error-message" v-if="repasswordError">
			密码两次密码不一致
		</view>
		<view class="btn-register" @click="register">
			注册并登录
		</view>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	export default {
		data() {
			return {
				wxUser: {
					nickName: '',
					account: '',
					password: '',
					repassword: '',
				},
				nameError: false,
				accountError: false,
				passwordError: false,
				repasswordError: false,
				timer: null
			}
		},
		methods: {
			...mapMutations('module_user', ['saveToken', 'saveUserInfoToStorage']),
			checkName() {
				this.nameError = this.wxUser.nickName === ''
			},
			checkAccount() {
				this.accountError = this.wxUser.account === ''
			},
			checkPassword() {
				this.passwordError = this.wxUser.password === ''
			},
			checkRepassword() {
				this.repasswordError = this.wxUser.repassword !== this.wxUser.password
			},
			async register() {
				if(this.wxUser.nickName === '') return uni.$showMsg('请填写用户信息')
				if(this.wxUser.account === '') return uni.$showMsg('请填写用户信息')
				if(this.wxUser.account.length < 5) return uni.$showMsg('账号长度必须5为以上')
				if(this.wxUser.password === '') return uni.$showMsg('请填写用户信息')
				if(this.wxUser.password.length < 5) return uni.$showMsg('密码长度必须5为以上')
				if(this.wxUser.repassword !== this.wxUser.password) return uni.$showMsg('请填写用户信息')
				const { data: res } = await uni.$http.post('/user/users/register', this.wxUser)
				if(res.code === 200) {
					uni.navigateTo({
						url: '/subcontract/sign_in/sign_in'
					})
				}else {
					clearTimeout(this.timer)
					this.timer = setTimeout(() => {
						uni.$showMsg(res.msg)
					}, 1000)
				}
			}
		}
	}
</script>

<style lang="scss">
.register-container {
	padding-top: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	.logo-box {
		width: 70px;
		height: 70px;
		image {
			width: 100%;
			height: 100%;
		}
		margin-bottom: 20px;
	}
	.input-box {
		width: 90%;
		height: 40px;
		display: flex;
		line-height: 40px;
		margin-bottom: 40rpx;
		border-bottom: 1px solid #d9d9d9;
		text {
			font-size: 14px;
			width: 20%;
		}
		input {
			width: 60%;
			height: 100%;
		}
	}
	.btn-register {
		color: #fff;
		width: 90%;
		height: 45px;
		line-height: 45px;
		text-align: center;
		letter-spacing: 4px;
		background-color: #52e3fc;
		margin: 20px 0;
	}
	.error-message {
		color: #CD0000;
		font-size: 12px;
	}
}
</style>
